<!DOCTYPE html
		PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>小鹅拼拼在线购物平台 - 首页</title>

	<link rel="shortcut icon" href="img/xiaoe.ico"/>
	<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />
	<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="css/hmstyle.css" rel="stylesheet" type="text/css" />
	<link href="css/skin.css" rel="stylesheet" type="text/css" />
	<link href="css/lee.css" rel="stylesheet" type="text/css" />
	<!-- <link href="components/mloading/jquery.mloading.css" rel="stylesheet" type="text/css" /> -->
	<script src="AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
	<script src="AmazeUI-2.4.2/assets/js/amazeui.min.js" type="text/javascript"></script>
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/axios.min.js" type="text/javascript"></script>
</head>

<body>

<div class="attention">本电商购物平台为演示网站，仅供学习和交流。所有交易金额均为0.01元，并且不会真实发货！！</div>

<!-- <div id="index" @scroll="handleScroll"> -->
<div id="index">

	<div class="hmtop">
		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd" v-show="!userIsLogin">
						<a href="login.html" target="_top" class="h">亲，请登录</a>
						<a href="register.html" target="_top">免费注册</a>
					</div>
					<div class="menu-hd" v-show="userIsLogin">
						<span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
						<a href="javascript:void(0);" style="color: #d2364c" @click="logout">退出</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
						<i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
				</div>
			</ul>
		</div>

		<!--悬浮搜索框-->
		<div class="nav white">
			<!-- <div class="logo"><img src="images/logo.png" /></div> -->
			<div class="logoBig">
				<li><img src="images/logobig.png"  alt=""/></li>
			</div>
			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form action="">
					<input id="searchInput" v-model="keywords" name="index_none_header_sysc" type="text"
						   placeholder="搜索" autocomplete="off">
					<input id="ai-topsearch" @click="doSearch" class="submit am-btn" value="搜索" index="1">
				</form>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="index444">
		<div class="banner" style="top: 213px;">
			<!--轮播 -->
			<div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
				<ul class="am-slides">
					<li class="banner1"><a></a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="shopNav">
			<div class="slideall">
				<div class="long-title"><span class="all-goods">全部分类</span></div>
				<div class="nav-cont">
					<ul>
						<li class="index"><a href="index.html">首页</a></li>
					</ul>
				</div>
				<!--侧边导航 -->
				<div id="nav" class="navfull">
					<div class="area clearfix">
						<div class="category-content" id="guide_2">
							<div class="category">
								<ul class="category-list" id="js_climit_li"></ul>
							</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>

	<div class="shopMainbg">
		<div class="shopMain" id="shopmain">
			<div class="am-g am-g-fixed recommendation"></div>
			<div class="clear "></div>
			<!--热门活动 -->
			<div v-for="(rootCat, rootIndex) in sixNewItemsList">
				<!--甜点-->
				<div class="am-container ">
					<div class="shopTitle ">
						<h4>{{rootCat.rootCatName}}</h4>
						<h3>{{rootCat.slogan}}</h3>
					</div>
				</div>
				<div class="am-g am-g-fixed floodFour">
					<div class="am-u-sm-5 am-u-md-4 text-one list" :style="'background-color:' + rootCat.bgColor">
						<a href="javascript:void(0);">
							<img :src="rootCat.catImage" alt=""/>
						</a>
						<div class="triangle-topright"></div>
					</div>
					<div class="am-u-sm-7 am-u-md-4 text-two sug">
						<div class="outer-con ">
							<div class="title ">
								{{rootCat.simpleItemList[0].itemName}}
							</div>
						</div>
						<a :href="'item.html?itemId=' + rootCat.simpleItemList[0].itemId" target="_blank"><img :src="rootCat.simpleItemList[0].itemUrl" style="width: 170px; height: 170px;" alt=""/></a>
					</div>
					<div class="am-u-sm-7 am-u-md-4 text-two">
						<div class="outer-con ">
							<div class="title ">
								{{rootCat.simpleItemList[1].itemName}}
							</div>
						</div>
						<a :href="'item.html?itemId=' + rootCat.simpleItemList[1].itemId" target="_blank"><img :src="rootCat.simpleItemList[1].itemUrl" style="width: 170px; height: 170px;" alt=""/></a>
					</div>
					<div class="am-u-sm-3 am-u-md-2 text-three big" >
						<div class="outer-con " >
							<div class="title ">
								{{rootCat.simpleItemList[2].itemName}}
							</div>
						</div>
						<a :href="'item.html?itemId=' + rootCat.simpleItemList[2].itemId" target="_blank"><img :src="rootCat.simpleItemList[2].itemUrl" style="width: 170px; height: 170px;" alt=""/></a>
					</div>
					<div class="am-u-sm-3 am-u-md-2 text-three sug">
						<div class="outer-con ">
							<div class="title ">
								{{rootCat.simpleItemList[3].itemName}}
							</div>
						</div>
						<a :href="'item.html?itemId=' + rootCat.simpleItemList[3].itemId" target="_blank"><img :src="rootCat.simpleItemList[3].itemUrl" style="width: 170px; height: 170px;" alt=""/></a>
					</div>
					<div class="am-u-sm-3 am-u-md-2 text-three ">
						<div class="outer-con ">
							<div class="title ">
								{{rootCat.simpleItemList[4].itemName}}
							</div>
						</div>
						<a :href="'item.html?itemId=' + rootCat.simpleItemList[4].itemId" target="_blank"><img :src="rootCat.simpleItemList[4].itemUrl" style="width: 170px; height: 170px;" alt=""/></a>
					</div>
					<div class="am-u-sm-3 am-u-md-2 text-three last big ">
						<div class="outer-con ">
							<div class="title ">
								{{rootCat.simpleItemList[5].itemName}}
							</div>
						</div>
						<a :href="'item.html?itemId=' + rootCat.simpleItemList[5].itemId" target="_blank"><img :src="rootCat.simpleItemList[5].itemUrl" style="width: 170px; height: 170px;" alt=""/></a>
					</div>
				</div>
				<div class="clear "></div>
			</div>

			<div class="footer ">
				<div class="footer-hd "></div>
				<div class="footer-bd ">
					<p>
						<em>© 2021 pinpin.com 粤ICP备13009803号-11 深圳小鹅文化传媒有限公司 版权所有</em>
					</p>
				</div>
			</div>
		</div>
	</div>

	<!--菜单 -->
	<div class="tip">
		<div id="sidebar">
			<div id="wrap">
				<div id="prof" class="item " @click="goUserCenter">
					<a href="# ">
						<span class="setting "></span>
					</a>
					<div class="ibar_login_box status_login " style="height: 150px">
						<div class="avatar_box ">
							<p class="avatar_imgbox ">
								<img v-show="userIsLogin" :src="userInfo.face" alt=""/>
								<img v-show="!userIsLogin" src="img/default-face.png" alt=""/>
							</p>
							<ul class="user_info ">
								<li v-show="!userIsLogin">用户未登录</li>
								<li v-show="userIsLogin">用户昵称：{{userInfo.nickname}}</li>
								<li v-show="userIsLogin" @click="logout">退出登录</li>
							</ul>
						</div>
						<i class="icon_arrow_white "></i>
					</div>
				</div>
				<div id="shopCart " class="item " @click="goToShopcart">
					<a href="# ">
						<span class="message "></span>
					</a>
					<p>购物车</p>
					<p class="cart_num ">{{shopcartItemCounts}}</p>
				</div>
				<div class="quick_toggle ">
					<li class="qtitem ">
						<a href="#top " class="return_top "><span class="top "></span></a>
					</li>
				</div>
				<!--回到顶部 -->
				<div id="quick_links_pop " class="quick_links_pop hide "></div>
			</div>
		</div>
		<div id="prof-content " class="nav-content ">
			<div class="nav-con-close ">
				<i class="am-icon-angle-right am-icon-fw "></i>
			</div>
			<div>
				我
			</div>
		</div>
		<div id="shopCart-content " class="nav-content ">
			<div class="nav-con-close ">
				<i class="am-icon-angle-right am-icon-fw "></i>
			</div>
			<div>
				购物车
			</div>
		</div>
	</div>
</div>
<!-- <script>
    window.jQuery || document.write('<script src="basic/js/jquery.min.js "><\/script>');
</script> -->
<script type="text/javascript " src="basic/js/quick_links.js"></script>
<!-- <script type="text/javascript " src="js/jquery.blockUI.js"></script> -->
<!-- <script type="text/javascript " src="components/mloading/jquery.mloading.js"></script> -->
<script type="text/javascript " src="js/app.js"></script>
<script src="js/base64.min.js"  type="text/javascript"></script>
<script src="js/analytic.js"  type="text/javascript"></script>
<script type="text/javascript">
	analytics()
</script>
<script type="text/javascript">
	function showPage(type, catOrItemId) {
		// console.log("type:" + type);
		// console.log("catOrItemId:" + catOrItemId);

		if(type === 1) {
			window.open("item.html?itemId=" + catOrItemId);
		} else if (type === 2) {
			window.open("catItems.html?searchType=catItems&catId=" + catOrItemId);
		}
	}
</script>
<script type="text/javascript">
	let index = new Vue({
		el: "#index",
		data: {
			carouselList: [],
			categoryList: [],
			sixNewItemsList: [],
			userIsLogin: false,
			userInfo: {
				id:"",
				nickname:"",
				userUniqueToken:"",
				userRefreshToken:"",
				username:""
			},
			keywords: null,
			catIndex: 0,			// 用于懒加载判断每次的幅度
			isScrolling: true,
			shopcartItemCounts: 0,	// 购物车中商品的数量
		},
		created() {
			let me = this;
			// 用户cookie操作
			let userCookie = app.getCookie("user");
			if (userCookie !== null && userCookie !== undefined && userCookie !== '') {
				let userInfoStr = decodeURIComponent(userCookie);
				if (userInfoStr !== null && userInfoStr !== undefined && userInfoStr !== '') {
					let userInfo = JSON.parse(userInfoStr);
					// 判断是否是一个对象
					if (typeof(userInfo)  == "object" ) {
						this.userIsLogin = true;
						console.log(userInfo);
						this.userInfo = userInfo;
					} else {
						this.userIsLogin = false;
						this.userInfo = {};
					}
				}
			} else {
				me.userIsLogin = false;
				me.userInfo = {};
			}
			// 渲染轮播图
			me.renderCarousel();
			// 渲染分类
			me.renderCategorys();
			// 渲染分类下最新商品
			me.renderSixNewItems();
			// 从购物车中拿到商品的数量
			me.shopcartItemCounts = app.getShopcartItemCounts();
		},
		methods: {
			goUserCenter() {
				// 判断用户是否登录
				let userIsLogin = this.userIsLogin;
				if (!userIsLogin) {
					// 用户未登录，则跳转
					window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
				} else {
					window.location.href = app.centerServerUrl;
				}
			},
			goToShopcart() {
				window.location.href = "shopcart.html";
			},
			doSearch() {
				let keywords = this.keywords;
				// console.log(keywords);
				if (keywords === null || keywords === undefined || keywords === '') {
					alert("搜索内容不能为空");
					return;
				}
				// window.location.href = "search.html?keywords=" + keywords;
				window.open("catItems.html?searchType=searchItems&keywords=" + keywords);
				// window.open("search.html?searchType=searchItems&keywords=" + keywords);
			},
			renderSixNewItems() {

				let serverUrl = app.serverUrl;
				let categoryList = this.categoryList;
				let catIndex = this.catIndex;

				let rootCat = categoryList[catIndex];
				if (rootCat === undefined || rootCat === null || rootCat === '') {
					return;
				}
				let rootCatId = rootCat.id;

				catIndex++;
				this.catIndex = catIndex;

				// 获得各个分类下的最新6个商品
				axios.get(
						serverUrl + '/index/sixNewItems/' + rootCatId, {})
						.then(res => {
							if (res.data.status === 200) {
								let sixNewItemsListTemp = res.data.data
								let sixNewItemsList = this.sixNewItemsList;
								sixNewItemsList.push(sixNewItemsListTemp[0]);
								this.sixNewItemsList = sixNewItemsList;
								// console.log(sixNewItemsList);
								this.isScrolling = false;	// 加载完毕以后表示下次可以继续滚动加载
							}
						});
			},

			renderCarousel() {
				let serverUrl = app.serverUrl;
				// 获得轮播图
				axios.get(
						serverUrl + '/index/carousel', {})
						.then(res => {
							if (res.data.status === 200) {
								let carouselList = res.data.data
								this.carouselList = carouselList;
								// 循环渲染轮播图
								let $slider = $('#demo-slider-0');
								for (let i = 0; i < carouselList.length; i++) {

									let type = carouselList[i].type;
									let catId = carouselList[i].catId;
									let itemId = carouselList[i].itemId;
									let catOrItemId = "";

									if (type === 1) {
										catOrItemId = itemId;
									}
									if (type === 2) {
										catOrItemId = catId;
									}

									catOrItemId = encodeURI(catOrItemId);

									let cal = '<li class="" style="background: ' + carouselList[i].backgroundColor +
											';">' +
											'<a href=javascript:showPage(' + type + ',\"'+catOrItemId+'\");><img src="' + carouselList[i].imageUrl + '"  alt=""/></a>' +
											+'</li>';
									$slider.flexslider('addSlide', cal);
								}
								// <li class="banner4"><a><img src="images/ad4.jpg" /></a></li>

								// console.log($slider.flexslider('count'));
								$slider.flexslider('removeSlide', 0);

								// let img1 = '<li><img src="http://122.152.205.72:88/group1/M00/00/02/CpoxxFvJanCAMgx0AAU6szwbghI657.png" />';
								// $slider.flexslider('addSlide', img1);
							}
						});
			},
			renderCategorys() {
				let serverUrl = app.serverUrl;

				// 获得商品分类 - 大分类
				axios.get(
						serverUrl + '/index/cats', {})
						.then(res => {

							if (res.data.status === 200) {
								let categoryList = res.data.data
								this.categoryList = categoryList;

								let rootCatHtml = "";
								for (let i = 0; i < categoryList.length; i++) {

									let cat = categoryList[i];
									rootCatHtml += '' +
											'<li class="appliance js_toggle relative">' +
											'<div class="category-info">' +
											'<h3 class="category-name b-category-name">' +
											'<i><img src="' + cat.logo + '" alt=""></i>' +
											'<a class="ml-22" title="' + cat.name + '">' + cat.name + '</a>' +
											'</h3>' +
											'<em>&gt;</em></div>' +
											'<div class="menu-item menu-in top">' +
											'<div class="area-in">' +
											'<div class="area-bg">' +
											'<div class="menu-srot">' +
											'<div class="sort-side" rootCatId="' + cat.id + '"></div>' +
											'</div>' +
											'</div>' +
											'</div>' +
											'</div>' +
											'<b class="arrow"></b>' +
											'</li>';
								}
								let $leftNav = $('#js_climit_li');
								$leftNav.html(rootCatHtml);

								$("li").hover(function () {
									// debugger;
									$(".category-content .category-list li.first .menu-in").css("display",
											"none");
									$(".category-content .category-list li.first").removeClass("hover");

									let meLi = $(this);

									let subWapper = $(this).children("div.menu-in").children("div.area-in")
											.children("div.area-bg").children("div.menu-srot").children(
													"div.sort-side");
									// console.log(subWapper.html());
									let subCatHtml = subWapper.html();
									let rootCatId = subWapper.attr("rootCatId");
									// console.log(rootCatId);
									// 如果该节点下没有内容，则发起请求查询子分类并且渲染到页面，如果有的话就不查询了（懒加载模式）
									if (subCatHtml === null || subCatHtml === '' || subCatHtml === undefined) {
										if (rootCatId !== undefined && rootCatId !== null && rootCatId !== '') {
											// 根据root分类id查询该分类下的所有子分类
											axios.get(
													serverUrl + '/index/subCat/' + rootCatId, {})
													.then(res => {
														if (res.data.status === 200) {
															let catList = res.data.data
															// this.catList = catList;
															// debugger;
															let subRenderHtml = '';
															for (let i = 0; i < catList.length; i++) {
																let cat = catList[i];
																subRenderHtml += '' +
																		'<dl class="dl-sort">' +
																		'<dt><span title="' + cat.name + '">' +
																		cat.name + '</span></dt>';

																// 拼接第三级分类
																let subCatList = cat.subCatList;
																for (let j = 0; j < subCatList.length; j++) {
																	let subCat = subCatList[j];
																	subRenderHtml += '<dd><a title="' + subCat
																					.subName + '" href="catItems.html?searchType=catItems&catId='+ subCat.subId +'" target="_blank"><span>' +
																			subCat.subName + '</span></a></dd>'
																}

																subRenderHtml += '</dl>';
															}
															subWapper.html(subRenderHtml);
															meLi.addClass("hover");
															meLi.children("div.menu-in").css("display",
																	"block");
														}
													});
										}
										// let renderHtml = ''
										// 	+ '<dl class="dl-sort">'
										// 		+ '<dt><span title="大包装">大包装</span></dt>'
										// 		+ '<dd><a title="蒸蛋糕" href="#"><span>蒸蛋糕</span></a></dd>'
										// 		+ '<dd><a title="脱水蛋糕" href="#"><span>脱水蛋糕</span></a></dd>'
										// 		+ '<dd><a title="瑞士卷" href="#"><span>瑞士卷</span></a></dd>'
										// 		+ '<dd><a title="软面包" href="#"><span>软面包</span></a></dd>'
										// 		+ '<dd><a title="马卡龙" href="#"><span>马卡龙</span></a></dd>'
										// 		+ '<dd><a title="千层饼" href="#"><span>千层饼</span></a></dd>'
										// 		+ '<dd><a title="甜甜圈" href="#"><span>甜甜圈</span></a></dd>'
										// 		+ '<dd><a title="蒸三明治" href="#"><span>蒸三明治</span></a></dd>'
										// 		+ '<dd><a title="铜锣烧" href="#"><span>铜锣烧</span></a></dd>'
										// 	+ '</dl>'
										// 	+ '<dl class="dl-sort">'
										// 		+ '<dt><span title="两件套">两件套</span></dt>'
										// 		+ '<dd><a title="蒸蛋糕" href="#"><span>蒸蛋糕</span></a></dd>'
										// 		+ '<dd><a title="脱水蛋糕" href="#"><span>脱水蛋糕</span></a></dd>'
										// 		+ '<dd><a title="瑞士卷" href="#"><span>瑞士卷</span></a></dd>'
										// 		+ '<dd><a title="软面包" href="#"><span>软面包</span></a></dd>'
										// 		+ '<dd><a title="马卡龙" href="#"><span>马卡龙</span></a></dd>'
										// 		+ '<dd><a title="千层饼" href="#"><span>千层饼</span></a></dd>'
										// 		+ '<dd><a title="甜甜圈" href="#"><span>甜甜圈</span></a></dd>'
										// 		+ '<dd><a title="蒸三明治" href="#"><span>蒸三明治</span></a></dd>'
										// 		+ '<dd><a title="铜锣烧" href="#"><span>铜锣烧</span></a></dd>'
										// 	+ '</dl>';
										// 	$(this)
										// 		.children("div.menu-in")
										// 		.children("div.area-in")
										// 		.children("div.area-bg")
										// 		.children("div.menu-srot")
										// 		.children("div.sort-side")
										// 		.html(renderHtml);
									} else {
										$(this).addClass("hover");
										$(this).children("div.menu-in").css("display", "block");
									}

									// $(this).addClass("hover");
									// $(this).children("div.menu-in").css("display", "block")
								}, function () {
									$(this).removeClass("hover")
									$(this).children("div.menu-in").css("display", "none")
								});
								this.renderSixNewItems();
							}
						});
			},
			getRequest() {},
			postRequest() {},
			logout() {
				let userInfo = this.userInfo;
				let serverUrl = app.serverUrl;
				axios.defaults.withCredentials = true;
				axios.post(serverUrl + '/passport/logout?userId=' + userInfo.id,{},
						{
							headers: {
								'headerUserId': userInfo.id,
								'headerUserToken': userInfo.userUniqueToken,
								'headerUserRefreshToken': userInfo.userRefreshToken
							}
						})
						.then(res => {
							if (res.data.status === 200) {
								window.location.href = app.shopServerUrl;
							} else if (res.data.status === 500) {
								alert(res.data.msg);
							}
						});
			}
		}
	});
</script>
<script type="text/javascript">

	$(window).scroll(
			function() {
				// scrollTop为滚动条在Y轴上的滚动距离。
				// clientHeight为内容可视区域的高度。
				// scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
				let scrollTop = $(this).scrollTop();
				let scrollHeight = $(document).height();
				let windowHeight = $(this).height();
				if (scrollTop + windowHeight > (scrollHeight - 50) ) {
					// 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
					// console.log("123");
					index.renderSixNewItems();
				}
			});

</script>

</body>

</html>
